import React, { useState, useEffect } from 'react';
import {
  Card,
  Row,
  Col,
  Statistic,
  Table,
  Button,
  Space,
  Tag,
  Modal,
  Form,
  Input,
  Select,
  DatePicker,
  Switch,
  Tabs,
  Alert,
  Progress,
  List,
  Avatar,
  Tooltip,
  Badge,
  Descriptions,
  Timeline,
  message,
  Popconfirm,
  Drawer,
  InputNumber,
  Radio
} from 'antd';
import {
  SafetyOutlined,
  LockOutlined,
  UserOutlined,
  WarningOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  ExclamationCircleOutlined,
  ReloadOutlined,
  SettingOutlined,
  EyeOutlined,
  DeleteOutlined,
  EditOutlined,
  PlusOutlined,
  SearchOutlined,
  DownloadOutlined,
  BellOutlined,
  KeyOutlined,
  AuditOutlined,
  SecurityScanOutlined,
  GlobalOutlined,
  ClockCircleOutlined,
  TeamOutlined
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';

// const { TabPane } = Tabs; // Deprecated, using items instead
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

// 安全事件接口
interface SecurityEvent {
  id: string;
  type: 'login_failure' | 'suspicious_activity' | 'data_breach' | 'permission_change' | 'system_intrusion';
  severity: 'low' | 'medium' | 'high' | 'critical';
  title: string;
  description: string;
  source: string;
  target: string;
  timestamp: string;
  status: 'open' | 'investigating' | 'resolved' | 'false_positive';
  assignee?: string;
  tags: string[];
}

// 访问控制规则接口
interface AccessRule {
  id: string;
  name: string;
  type: 'ip_whitelist' | 'ip_blacklist' | 'geo_restriction' | 'time_restriction';
  rule: string;
  description: string;
  enabled: boolean;
  priority: number;
  createdAt: string;
  lastModified: string;
}

// 审计日志接口
interface AuditLog {
  id: string;
  userId: string;
  userName: string;
  action: string;
  resource: string;
  details: string;
  ip: string;
  userAgent: string;
  timestamp: string;
  result: 'success' | 'failure';
}

// 安全策略接口
interface SecurityPolicy {
  id: string;
  name: string;
  category: 'password' | 'session' | 'access' | 'data' | 'audit';
  description: string;
  rules: any;
  enabled: boolean;
  lastUpdated: string;
}

const SecurityCenter: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [securityEvents, setSecurityEvents] = useState<SecurityEvent[]>([]);
  const [accessRules, setAccessRules] = useState<AccessRule[]>([]);
  const [auditLogs, setAuditLogs] = useState<AuditLog[]>([]);
  const [securityPolicies, setSecurityPolicies] = useState<SecurityPolicy[]>([]);
  const [eventModalVisible, setEventModalVisible] = useState(false);
  const [ruleModalVisible, setRuleModalVisible] = useState(false);
  const [policyModalVisible, setPolicyModalVisible] = useState(false);
  const [selectedEvent, setSelectedEvent] = useState<SecurityEvent | null>(null);
  const [selectedRule, setSelectedRule] = useState<AccessRule | null>(null);
  const [selectedPolicy, setSelectedPolicy] = useState<SecurityPolicy | null>(null);
  const [eventForm] = Form.useForm();
  const [ruleForm] = Form.useForm();
  const [policyForm] = Form.useForm();

  // 模拟数据
  useEffect(() => {
    loadSecurityData();
  }, []);

  const loadSecurityData = () => {
    setLoading(true);
    
    // 模拟安全事件数据
    const mockEvents: SecurityEvent[] = [
      {
        id: '1',
        type: 'login_failure',
        severity: 'medium',
        title: '多次登录失败',
        description: '用户admin在5分钟内尝试登录失败10次',
        source: '192.168.1.100',
        target: 'admin',
        timestamp: dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss'),
        status: 'investigating',
        assignee: '安全团队',
        tags: ['登录', '暴力破解']
      },
      {
        id: '2',
        type: 'suspicious_activity',
        severity: 'high',
        title: '异常数据访问',
        description: '检测到用户在非工作时间大量下载敏感数据',
        source: '用户ID: 12345',
        target: '客户数据库',
        timestamp: dayjs().subtract(2, 'hours').format('YYYY-MM-DD HH:mm:ss'),
        status: 'open',
        tags: ['数据泄露', '异常行为']
      }
    ];

    // 模拟访问控制规则数据
    const mockRules: AccessRule[] = [
      {
        id: '1',
        name: 'IP白名单-办公网络',
        type: 'ip_whitelist',
        rule: '192.168.1.0/24',
        description: '允许办公网络IP段访问',
        enabled: true,
        priority: 1,
        createdAt: '2024-01-01',
        lastModified: '2024-01-15'
      },
      {
        id: '2',
        name: '地理位置限制',
        type: 'geo_restriction',
        rule: 'CN,US,UK',
        description: '仅允许中国、美国、英国地区访问',
        enabled: true,
        priority: 2,
        createdAt: '2024-01-01',
        lastModified: '2024-01-10'
      }
    ];

    // 模拟审计日志数据
    const mockAuditLogs: AuditLog[] = [
      {
        id: '1',
        userId: '12345',
        userName: 'admin',
        action: '登录系统',
        resource: '管理后台',
        details: '成功登录管理后台',
        ip: '192.168.1.100',
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)',
        timestamp: dayjs().subtract(30, 'minutes').format('YYYY-MM-DD HH:mm:ss'),
        result: 'success'
      },
      {
        id: '2',
        userId: '12346',
        userName: 'user1',
        action: '查看用户列表',
        resource: '/api/users',
        details: '获取用户列表数据',
        ip: '192.168.1.101',
        userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)',
        timestamp: dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss'),
        result: 'success'
      }
    ];

    // 模拟安全策略数据
    const mockPolicies: SecurityPolicy[] = [
      {
        id: '1',
        name: '密码策略',
        category: 'password',
        description: '密码复杂度和有效期策略',
        rules: {
          minLength: 8,
          requireUppercase: true,
          requireLowercase: true,
          requireNumbers: true,
          requireSpecialChars: true,
          maxAge: 90
        },
        enabled: true,
        lastUpdated: '2024-01-15'
      },
      {
        id: '2',
        name: '会话策略',
        category: 'session',
        description: '用户会话超时和并发控制',
        rules: {
          timeout: 30,
          maxConcurrentSessions: 3,
          requireReauth: true
        },
        enabled: true,
        lastUpdated: '2024-01-10'
      }
    ];

    setSecurityEvents(mockEvents);
    setAccessRules(mockRules);
    setAuditLogs(mockAuditLogs);
    setSecurityPolicies(mockPolicies);
    setLoading(false);
  };

  // 安全事件表格列
  const eventColumns: ColumnsType<SecurityEvent> = [
    {
      title: '事件类型',
      dataIndex: 'type',
      key: 'type',
      render: (type: string) => {
        const typeMap = {
          login_failure: { text: '登录失败', color: 'orange' },
          suspicious_activity: { text: '可疑活动', color: 'red' },
          data_breach: { text: '数据泄露', color: 'red' },
          permission_change: { text: '权限变更', color: 'blue' },
          system_intrusion: { text: '系统入侵', color: 'red' }
        };
        const config = typeMap[type as keyof typeof typeMap];
        return <Tag color={config.color}>{config.text}</Tag>;
      }
    },
    {
      title: '严重程度',
      dataIndex: 'severity',
      key: 'severity',
      render: (severity: string) => {
        const severityMap = {
          low: { text: '低', color: 'green' },
          medium: { text: '中', color: 'orange' },
          high: { text: '高', color: 'red' },
          critical: { text: '严重', color: 'red' }
        };
        const config = severityMap[severity as keyof typeof severityMap];
        return <Tag color={config.color}>{config.text}</Tag>;
      }
    },
    {
      title: '事件标题',
      dataIndex: 'title',
      key: 'title'
    },
    {
      title: '来源',
      dataIndex: 'source',
      key: 'source'
    },
    {
      title: '目标',
      dataIndex: 'target',
      key: 'target'
    },
    {
      title: '时间',
      dataIndex: 'timestamp',
      key: 'timestamp'
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusMap = {
          open: { text: '待处理', color: 'red' },
          investigating: { text: '调查中', color: 'orange' },
          resolved: { text: '已解决', color: 'green' },
          false_positive: { text: '误报', color: 'gray' }
        };
        const config = statusMap[status as keyof typeof statusMap];
        return <Tag color={config.color}>{config.text}</Tag>;
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button 
            type="link" 
            icon={<EyeOutlined />}
            onClick={() => {
              setSelectedEvent(record);
              setEventModalVisible(true);
            }}
          >
            查看
          </Button>
          <Button 
            type="link" 
            icon={<EditOutlined />}
            onClick={() => {
              setSelectedEvent(record);
              eventForm.setFieldsValue(record);
              setEventModalVisible(true);
            }}
          >
            处理
          </Button>
        </Space>
      )
    }
  ];

  // 访问控制规则表格列
  const ruleColumns: ColumnsType<AccessRule> = [
    {
      title: '规则名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (type: string) => {
        const typeMap = {
          ip_whitelist: { text: 'IP白名单', color: 'green' },
          ip_blacklist: { text: 'IP黑名单', color: 'red' },
          geo_restriction: { text: '地理限制', color: 'blue' },
          time_restriction: { text: '时间限制', color: 'orange' }
        };
        const config = typeMap[type as keyof typeof typeMap];
        return <Tag color={config.color}>{config.text}</Tag>;
      }
    },
    {
      title: '规则内容',
      dataIndex: 'rule',
      key: 'rule'
    },
    {
      title: '优先级',
      dataIndex: 'priority',
      key: 'priority'
    },
    {
      title: '状态',
      dataIndex: 'enabled',
      key: 'enabled',
      render: (enabled: boolean) => (
        <Tag color={enabled ? 'green' : 'red'}>
          {enabled ? '启用' : '禁用'}
        </Tag>
      )
    },
    {
      title: '最后修改',
      dataIndex: 'lastModified',
      key: 'lastModified'
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button 
            type="link" 
            icon={<EditOutlined />}
            onClick={() => {
              setSelectedRule(record);
              ruleForm.setFieldsValue(record);
              setRuleModalVisible(true);
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定要删除这个规则吗？"
            onConfirm={() => handleDeleteRule(record.id)}
          >
            <Button type="link" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      )
    }
  ];

  // 审计日志表格列
  const auditColumns: ColumnsType<AuditLog> = [
    {
      title: '用户',
      dataIndex: 'userName',
      key: 'userName'
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action'
    },
    {
      title: '资源',
      dataIndex: 'resource',
      key: 'resource'
    },
    {
      title: 'IP地址',
      dataIndex: 'ip',
      key: 'ip'
    },
    {
      title: '时间',
      dataIndex: 'timestamp',
      key: 'timestamp'
    },
    {
      title: '结果',
      dataIndex: 'result',
      key: 'result',
      render: (result: string) => (
        <Tag color={result === 'success' ? 'green' : 'red'}>
          {result === 'success' ? '成功' : '失败'}
        </Tag>
      )
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Button 
          type="link" 
          icon={<EyeOutlined />}
          onClick={() => {
            Modal.info({
              title: '审计日志详情',
              width: 600,
              content: (
                <Descriptions column={1}>
                  <Descriptions.Item label="用户">{record.userName}</Descriptions.Item>
                  <Descriptions.Item label="操作">{record.action}</Descriptions.Item>
                  <Descriptions.Item label="资源">{record.resource}</Descriptions.Item>
                  <Descriptions.Item label="详情">{record.details}</Descriptions.Item>
                  <Descriptions.Item label="IP地址">{record.ip}</Descriptions.Item>
                  <Descriptions.Item label="用户代理">{record.userAgent}</Descriptions.Item>
                  <Descriptions.Item label="时间">{record.timestamp}</Descriptions.Item>
                  <Descriptions.Item label="结果">
                    <Tag color={record.result === 'success' ? 'green' : 'red'}>
                      {record.result === 'success' ? '成功' : '失败'}
                    </Tag>
                  </Descriptions.Item>
                </Descriptions>
              )
            });
          }}
        >
          查看详情
        </Button>
      )
    }
  ];

  // 安全策略表格列
  const policyColumns: ColumnsType<SecurityPolicy> = [
    {
      title: '策略名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '类别',
      dataIndex: 'category',
      key: 'category',
      render: (category: string) => {
        const categoryMap = {
          password: { text: '密码策略', color: 'blue' },
          session: { text: '会话策略', color: 'green' },
          access: { text: '访问策略', color: 'orange' },
          data: { text: '数据策略', color: 'purple' },
          audit: { text: '审计策略', color: 'cyan' }
        };
        const config = categoryMap[category as keyof typeof categoryMap];
        return <Tag color={config.color}>{config.text}</Tag>;
      }
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description'
    },
    {
      title: '状态',
      dataIndex: 'enabled',
      key: 'enabled',
      render: (enabled: boolean) => (
        <Tag color={enabled ? 'green' : 'red'}>
          {enabled ? '启用' : '禁用'}
        </Tag>
      )
    },
    {
      title: '最后更新',
      dataIndex: 'lastUpdated',
      key: 'lastUpdated'
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button 
            type="link" 
            icon={<EditOutlined />}
            onClick={() => {
              setSelectedPolicy(record);
              policyForm.setFieldsValue(record);
              setPolicyModalVisible(true);
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定要删除这个策略吗？"
            onConfirm={() => {
              setSecurityPolicies(prev => prev.filter(policy => policy.id !== record.id));
              message.success('策略删除成功');
            }}
          >
            <Button type="link" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      )
    }
  ];

  // 处理删除规则
  const handleDeleteRule = (id: string) => {
    setAccessRules(prev => prev.filter(rule => rule.id !== id));
    message.success('规则删除成功');
  };

  // 处理事件状态更新
  const handleEventStatusUpdate = (values: any) => {
    if (selectedEvent) {
      setSecurityEvents(prev => 
        prev.map(event => 
          event.id === selectedEvent.id 
            ? { ...event, ...values }
            : event
        )
      );
      message.success('事件状态更新成功');
      setEventModalVisible(false);
      setSelectedEvent(null);
      eventForm.resetFields();
    }
  };

  // 处理规则保存
  const handleRuleSave = (values: any) => {
    if (selectedRule) {
      setAccessRules(prev => 
        prev.map(rule => 
          rule.id === selectedRule.id 
            ? { ...rule, ...values, lastModified: dayjs().format('YYYY-MM-DD') }
            : rule
        )
      );
      message.success('规则更新成功');
    } else {
      const newRule: AccessRule = {
        id: Date.now().toString(),
        ...values,
        createdAt: dayjs().format('YYYY-MM-DD'),
        lastModified: dayjs().format('YYYY-MM-DD')
      };
      setAccessRules(prev => [...prev, newRule]);
      message.success('规则创建成功');
    }
    setRuleModalVisible(false);
    setSelectedRule(null);
    ruleForm.resetFields();
  };

  return (
    <div style={{ padding: '24px' }}>
      {/* 安全概览 */}
      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="安全事件"
              value={securityEvents.length}
              prefix={<WarningOutlined style={{ color: '#ff4d4f' }} />}
              suffix="个"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="访问规则"
              value={accessRules.length}
              prefix={<SafetyOutlined style={{ color: '#52c41a' }} />}
              suffix="条"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="今日审计"
              value={auditLogs.length}
              prefix={<AuditOutlined style={{ color: '#1890ff' }} />}
              suffix="条"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="安全评分"
              value={85}
              prefix={<SafetyOutlined style={{ color: '#faad14' }} />}
              suffix="分"
            />
          </Card>
        </Col>
      </Row>

      {/* 安全威胁趋势 */}
      <Card style={{ marginBottom: '24px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
          <h3>安全威胁趋势</h3>
          <Button icon={<ReloadOutlined />} onClick={loadSecurityData}>
            刷新
          </Button>
        </div>
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <Alert
              message="高危威胁"
              description="检测到2个高危安全威胁，需要立即处理"
              type="error"
              showIcon
            />
          </Col>
          <Col span={8}>
            <Alert
              message="中危威胁"
              description="检测到5个中危安全威胁，建议尽快处理"
              type="warning"
              showIcon
            />
          </Col>
          <Col span={8}>
            <Alert
              message="系统状态"
              description="安全防护系统运行正常"
              type="success"
              showIcon
            />
          </Col>
        </Row>
      </Card>

      {/* 主要内容区域 */}
      <Tabs 
        defaultActiveKey="events"
        items={[
          {
            key: 'events',
            label: <span><WarningOutlined />安全事件</span>,
            children: (
              <Card>
                <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'space-between' }}>
                  <Space>
                    <Input.Search
                      placeholder="搜索安全事件"
                      style={{ width: 300 }}
                      onSearch={(value) => console.log('搜索:', value)}
                    />
                    <Select placeholder="事件类型" style={{ width: 150 }}>
                      <Option value="login_failure">登录失败</Option>
                      <Option value="suspicious_activity">可疑活动</Option>
                      <Option value="data_breach">数据泄露</Option>
                      <Option value="permission_change">权限变更</Option>
                      <Option value="system_intrusion">系统入侵</Option>
                    </Select>
                    <Select placeholder="严重程度" style={{ width: 120 }}>
                      <Option value="low">低</Option>
                      <Option value="medium">中</Option>
                      <Option value="high">高</Option>
                      <Option value="critical">严重</Option>
                    </Select>
                  </Space>
                  <Button type="primary" icon={<PlusOutlined />}>
                    创建事件
                  </Button>
                </div>
                <Table
                  columns={eventColumns}
                  dataSource={securityEvents}
                  rowKey="id"
                  loading={loading}
                  pagination={{
                    total: securityEvents.length,
                    pageSize: 10,
                    showSizeChanger: true,
                    showQuickJumper: true,
                  }}
                  scroll={{ x: 1200 }}
                />
              </Card>
            )
          },
          {
            key: 'access',
            label: <span><LockOutlined />访问控制</span>,
            children: (
              <Card>
                <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'space-between' }}>
                  <Space>
                    <Input.Search
                      placeholder="搜索访问规则"
                      style={{ width: 300 }}
                      onSearch={(value) => console.log('搜索:', value)}
                    />
                    <Select placeholder="规则类型" style={{ width: 150 }}>
                      <Option value="ip_whitelist">IP白名单</Option>
                      <Option value="ip_blacklist">IP黑名单</Option>
                      <Option value="geo_restriction">地理限制</Option>
                      <Option value="time_restriction">时间限制</Option>
                    </Select>
                  </Space>
                  <Button type="primary" icon={<PlusOutlined />}>
                    添加规则
                  </Button>
                </div>
                <Table
                  columns={ruleColumns}
                  dataSource={accessRules}
                  rowKey="id"
                  loading={loading}
                  pagination={{
                    total: accessRules.length,
                    pageSize: 10,
                    showSizeChanger: true,
                    showQuickJumper: true,
                  }}
                />
              </Card>
            )
          },
          {
            key: 'audit',
            label: <span><AuditOutlined />审计日志</span>,
            children: (
              <Card>
                <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'space-between' }}>
                  <Space>
                    <Input.Search
                      placeholder="搜索审计日志"
                      style={{ width: 300 }}
                      onSearch={(value) => console.log('搜索:', value)}
                    />
                    <Select placeholder="操作类型" style={{ width: 150 }}>
                      <Option value="login">登录</Option>
                      <Option value="logout">登出</Option>
                      <Option value="create">创建</Option>
                      <Option value="update">更新</Option>
                      <Option value="delete">删除</Option>
                    </Select>
                    <RangePicker />
                  </Space>
                  <Button icon={<DownloadOutlined />}>
                    导出日志
                  </Button>
                </div>
                <Table
                  columns={auditColumns}
                  dataSource={auditLogs}
                  rowKey="id"
                  loading={loading}
                  pagination={{
                    total: auditLogs.length,
                    pageSize: 10,
                    showSizeChanger: true,
                    showQuickJumper: true,
                  }}
                  scroll={{ x: 1200 }}
                />
              </Card>
            )
          },
          {
            key: 'policies',
            label: <span><SettingOutlined />安全策略</span>,
            children: (
              <Card>
                <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'space-between' }}>
                  <Space>
                    <Input.Search
                      placeholder="搜索安全策略"
                      style={{ width: 300 }}
                      onSearch={(value) => console.log('搜索:', value)}
                    />
                    <Select placeholder="策略类别" style={{ width: 150 }}>
                      <Option value="password">密码策略</Option>
                      <Option value="session">会话策略</Option>
                      <Option value="access">访问策略</Option>
                      <Option value="data">数据策略</Option>
                      <Option value="audit">审计策略</Option>
                    </Select>
                  </Space>
                  <Button type="primary" icon={<PlusOutlined />}>
                    创建策略
                  </Button>
                </div>
                <Table
                  columns={policyColumns}
                  dataSource={securityPolicies}
                  rowKey="id"
                  loading={loading}
                  pagination={{
                    total: securityPolicies.length,
                    pageSize: 10,
                    showSizeChanger: true,
                    showQuickJumper: true,
                  }}
                />
              </Card>
            )
          }
        ]}
      />

      {/* 安全事件处理模态框 */}
      <Modal
        title={selectedEvent ? '处理安全事件' : '查看安全事件'}
        open={eventModalVisible}
        onCancel={() => {
          setEventModalVisible(false);
          setSelectedEvent(null);
          eventForm.resetFields();
        }}
        footer={[
          <Button key="cancel" onClick={() => setEventModalVisible(false)}>
            取消
          </Button>,
          <Button 
            key="submit" 
            type="primary"
            onClick={() => eventForm.submit()}
          >
            保存
          </Button>
        ]}
        width={800}
      >
        {selectedEvent && (
          <div>
            <Descriptions column={2} style={{ marginBottom: '24px' }}>
              <Descriptions.Item label="事件类型">
                <Tag color="orange">{selectedEvent.type}</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="严重程度">
                <Tag color="red">{selectedEvent.severity}</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="来源">{selectedEvent.source}</Descriptions.Item>
              <Descriptions.Item label="目标">{selectedEvent.target}</Descriptions.Item>
              <Descriptions.Item label="时间">{selectedEvent.timestamp}</Descriptions.Item>
              <Descriptions.Item label="标签">
                {selectedEvent.tags.map(tag => <Tag key={tag}>{tag}</Tag>)}
              </Descriptions.Item>
              <Descriptions.Item label="描述" span={2}>
                {selectedEvent.description}
              </Descriptions.Item>
            </Descriptions>
            
            <Form
              form={eventForm}
              layout="vertical"
              onFinish={handleEventStatusUpdate}
            >
              <Form.Item
                name="status"
                label="处理状态"
                rules={[{ required: true, message: '请选择处理状态' }]}
              >
                <Select>
                  <Option value="open">待处理</Option>
                  <Option value="investigating">调查中</Option>
                  <Option value="resolved">已解决</Option>
                  <Option value="false_positive">误报</Option>
                </Select>
              </Form.Item>
              <Form.Item
                name="assignee"
                label="指派给"
              >
                <Input placeholder="请输入处理人" />
              </Form.Item>
              <Form.Item
                name="notes"
                label="处理备注"
              >
                <TextArea rows={4} placeholder="请输入处理备注" />
              </Form.Item>
            </Form>
          </div>
        )}
      </Modal>

      {/* 访问规则编辑模态框 */}
      <Modal
        title={selectedRule ? '编辑访问规则' : '添加访问规则'}
        open={ruleModalVisible}
        onCancel={() => {
          setRuleModalVisible(false);
          setSelectedRule(null);
          ruleForm.resetFields();
        }}
        footer={[
          <Button key="cancel" onClick={() => setRuleModalVisible(false)}>
            取消
          </Button>,
          <Button 
            key="submit" 
            type="primary"
            onClick={() => ruleForm.submit()}
          >
            保存
          </Button>
        ]}
        width={600}
      >
        <Form
          form={ruleForm}
          layout="vertical"
          onFinish={handleRuleSave}
        >
          <Form.Item
            name="name"
            label="规则名称"
            rules={[{ required: true, message: '请输入规则名称' }]}
          >
            <Input placeholder="请输入规则名称" />
          </Form.Item>
          <Form.Item
            name="type"
            label="规则类型"
            rules={[{ required: true, message: '请选择规则类型' }]}
          >
            <Select placeholder="请选择规则类型">
              <Option value="ip_whitelist">IP白名单</Option>
              <Option value="ip_blacklist">IP黑名单</Option>
              <Option value="geo_restriction">地理限制</Option>
              <Option value="time_restriction">时间限制</Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="rule"
            label="规则内容"
            rules={[{ required: true, message: '请输入规则内容' }]}
          >
            <Input placeholder="请输入规则内容" />
          </Form.Item>
          <Form.Item
            name="description"
            label="规则描述"
          >
            <TextArea rows={3} placeholder="请输入规则描述" />
          </Form.Item>
          <Form.Item
            name="priority"
            label="优先级"
            rules={[{ required: true, message: '请输入优先级' }]}
          >
            <InputNumber min={1} max={100} placeholder="请输入优先级" style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item
            name="enabled"
            label="启用状态"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default SecurityCenter;